<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>窗口拖拽（改变大小/最小化/最大化/还原/关闭）参考链接：https://www.17sucai.com/pins/4218.html</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}

			/* drag */
			#drag {
				position: absolute;
				top: 100px;
				left: 100px;
				width: 300px;
				height: 160px;
				background: pink;
				border: 1px solid #fff;
				border-radius: 5px;
				box-shadow: 0 1px 3px 2px #ffe4fc;
			}

			#drag .title {
				position: relative;
				height: 27px;
				margin: 5px;
			}

			#drag .title h2 {
				font-size: 14px;
				height: 27px;
				line-height: 24px;
				border-bottom: 1px solid #fff;
			}

			#drag .title div {
				position: absolute;
				height: 19px;
				top: 2px;
				right: 0;
			}

			#drag .title a,
			a.open {
				float: left;
				width: 21px;
				height: 19px;
				display: block;
				margin-left: 5px;
				background: url(step.png) no-repeat;
			}

			a.open {
				position: absolute;
				top: 10px;
				left: 50%;
				margin-left: -10px;
				background-position: 0 0;
			}

			a.open:hover {
				background-position: 0 -29px;
			}

			#drag .title a.min {
				background-position: -29px 0;
			}

			#drag .title a.min:hover {
				background-position: -29px -29px;
			}

			#drag .title a.max {
				background-position: -60px 0;
			}

			#drag .title a.max:hover {
				background-position: -60px -29px;
			}

			#drag .title a.revert {
				background-position: -149px 0;
				display: none;
			}

			#drag .title a.revert:hover {
				background-position: -149px -29px;
			}

			#drag .title a.close {
				background-position: -89px 0;
			}

			#drag .title a.close:hover {
				background-position: -89px -29px;
			}

			#drag .content {
				overflow: auto;
				margin: 0 5px;
			}

			#drag .resizeBR {
				position: absolute;
				width: 14px;
				height: 14px;
				right: 0;
				bottom: 0;
				overflow: hidden;
				cursor: nw-resize;

			}

			#drag .resizeL,
			#drag .resizeT,
			#drag .resizeR,
			#drag .resizeB,
			#drag .resizeLT,
			#drag .resizeTR,
			#drag .resizeLB {
				position: absolute;
				background: #000;
				overflow: hidden;
				opacity: 0;
				filter: alpha(opacity=0);
			}

			#drag .resizeL,
			#drag .resizeR {
				top: 0;
				width: 5px;
				height: 100%;
				cursor: w-resize;
			}

			#drag .resizeR {
				right: 0;
			}

			#drag .resizeT,
			#drag .resizeB {
				width: 100%;
				height: 5px;
				cursor: n-resize;
			}

			#drag .resizeT {
				top: 0;
			}

			#drag .resizeB {
				bottom: 0;
			}

			#drag .resizeLT,
			#drag .resizeTR,
			#drag .resizeLB {
				width: 8px;
				height: 8px;
				background: #FF0;
			}

			#drag .resizeLT {
				top: 0;
				left: 0;
				cursor: nw-resize;
			}

			#drag .resizeTR {
				top: 0;
				right: 0;
				cursor: ne-resize;
			}

			#drag .resizeLB {
				left: 0;
				bottom: 0;
				cursor: ne-resize;
			}
		</style>
		<script type="text/javascript">
			var get = {
				byId: function(id) {
					return typeof id === "string" ? document.getElementById(id) : id
				},
				byClass: function(sClass, oParent) {
					var aClass = [];
					var reClass = new RegExp("(^| )" + sClass + "( |$)");
					var aElem = this.byTagName("*", oParent);
					for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
					return aClass
				},
				byTagName: function(elem, obj) {
					return (obj || document).getElementsByTagName(elem)
				}
			};
			var dragMinWidth = 250;
			var dragMinHeight = 124;
			/*-------------------------- +
			  拖拽函数
			 +-------------------------- */
			function drag(oDrag, handle) {
				var disX = dixY = 0;
				var oMin = get.byClass("min", oDrag)[0];
				var oMax = get.byClass("max", oDrag)[0];
				var oRevert = get.byClass("revert", oDrag)[0];
				var oClose = get.byClass("close", oDrag)[0];
				handle = handle || oDrag;
				handle.style.cursor = "move";
				handle.onmousedown = function(event) {
					var event = event || window.event;
					disX = event.clientX - oDrag.offsetLeft;
					disY = event.clientY - oDrag.offsetTop;

					document.onmousemove = function(event) {
						var event = event || window.event;
						var iL = event.clientX - disX;
						var iT = event.clientY - disY;
						var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
						var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;

						iL <= 0 && (iL = 0);
						iT <= 0 && (iT = 0);
						iL >= maxL && (iL = maxL);
						iT >= maxT && (iT = maxT);

						oDrag.style.left = iL + "px";
						oDrag.style.top = iT + "px";

						return false
					};

					document.onmouseup = function() {
						document.onmousemove = null;
						document.onmouseup = null;
						this.releaseCapture && this.releaseCapture()
					};
					this.setCapture && this.setCapture();
					return false
				};
				//最大化按钮
				oMax.onclick = function() {
					oDrag.style.top = oDrag.style.left = 0;
					oDrag.style.width = document.documentElement.clientWidth - 2 + "px";
					oDrag.style.height = document.documentElement.clientHeight - 2 + "px";
					this.style.display = "none";
					oRevert.style.display = "block";
				};
				//还原按钮
				oRevert.onclick = function() {
					oDrag.style.width = dragMinWidth + "px";
					oDrag.style.height = dragMinHeight + "px";
					oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
					oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
					this.style.display = "none";
					oMax.style.display = "block";
				};
				//最小化按钮
				oMin.onclick = oClose.onclick = function() {
					oDrag.style.display = "none";
					var oA = document.createElement("a");
					oA.className = "open";
					oA.href = "javascript:;";
					oA.title = "还原";
					document.body.appendChild(oA);
					oA.onclick = function() {
						oDrag.style.display = "block";
						document.body.removeChild(this);
						this.onclick = null;
					};
				};
				//阻止冒泡
				oMin.onmousedown = oMax.onmousedown = oClose.onmousedown = function(event) {
					this.onfocus = function() {
						this.blur()
					};
					(event || window.event).cancelBubble = true
				};
			}
			/*-------------------------- +
			  改变大小函数
			 +-------------------------- */
			function resize(oParent, handle, isLeft, isTop, lockX, lockY) {
				handle.onmousedown = function(event) {
					var event = event || window.event;
					var disX = event.clientX - handle.offsetLeft;
					var disY = event.clientY - handle.offsetTop;
					var iParentTop = oParent.offsetTop;
					var iParentLeft = oParent.offsetLeft;
					var iParentWidth = oParent.offsetWidth;
					var iParentHeight = oParent.offsetHeight;

					document.onmousemove = function(event) {
						var event = event || window.event;

						var iL = event.clientX - disX;
						var iT = event.clientY - disY;
						var maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;
						var maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;
						var iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;
						var iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;

						isLeft && (oParent.style.left = iParentLeft + iL + "px");
						isTop && (oParent.style.top = iParentTop + iT + "px");

						iW < dragMinWidth && (iW = dragMinWidth);
						iW > maxW && (iW = maxW);
						lockX || (oParent.style.width = iW + "px");

						iH < dragMinHeight && (iH = dragMinHeight);
						iH > maxH && (iH = maxH);
						lockY || (oParent.style.height = iH + "px");

						if ((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove =
							null;

						return false;
					};
					document.onmouseup = function() {
						document.onmousemove = null;
						document.onmouseup = null;
					};
					return false;
				}
			};
			window.onload = window.onresize = function() {
				var oDrag = document.getElementById("drag");
				var oTitle = get.byClass("title", oDrag)[0];
				var oL = get.byClass("resizeL", oDrag)[0];
				var oT = get.byClass("resizeT", oDrag)[0];
				var oR = get.byClass("resizeR", oDrag)[0];
				var oB = get.byClass("resizeB", oDrag)[0];
				var oLT = get.byClass("resizeLT", oDrag)[0];
				var oTR = get.byClass("resizeTR", oDrag)[0];
				var oBR = get.byClass("resizeBR", oDrag)[0];
				var oLB = get.byClass("resizeLB", oDrag)[0];

				drag(oDrag, oTitle);
				//四角
				resize(oDrag, oLT, true, true, false, false);
				resize(oDrag, oTR, false, true, false, false);
				resize(oDrag, oBR, false, false, false, false);
				resize(oDrag, oLB, true, false, false, false);
				//四边
				resize(oDrag, oL, true, false, false, true);
				resize(oDrag, oT, false, true, true, false);
				resize(oDrag, oR, false, false, false, true);
				resize(oDrag, oB, false, false, true, false);

				oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";
				oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";
			}
		</script>
	</head>
	<body>

		<div id="drag">
			<div class="title">
				<h2>这是一个可以拖动的窗口</h2>
				<div>
					<a class="min" href="javascript:;" title="最小化"></a>
					<a class="max" href="javascript:;" title="最大化"></a>
					<a class="revert" href="javascript:;" title="还原"></a>
					<a class="close" href="javascript:;" title="关闭"></a>
				</div>
			</div>
			<div class="resizeL"></div>
			<div class="resizeT"></div>
			<div class="resizeR"></div>
			<div class="resizeB"></div>
			<div class="resizeLT"></div>
			<div class="resizeTR"></div>
			<div class="resizeBR"></div>
			<div class="resizeLB"></div>
			<div class="content">
				① 窗口可以拖动；<br />
				② 窗口可以通过八个方向改变大小；<br />
				③ 窗口可以最小化、最大化、还原、关闭；<br />
				④ 限制窗口最小宽度/高度。
			</div>
		</div>

	</body>
</html>
